<template>
    <button
        ref="_ref"
        class="xiaoquan-button"
        :class="{
            [`xiaoquan-button--${type}`]: type,
            'is-plain': plain,
            'is-round': round,
            [`xiaoquan-button--${size}`]: size,
            'is-circle': circle,
            'is-disabled': disabled || loading,
        }"
        :disabled="disabled || loading"
    >
        <XiaoQuan-Icon v-if="loading" icon="spinner" spin/>
        <XiaoQuan-Icon v-if="icon" :icon="icon"/>
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>

<script setup>
    import { ref } from "vue";
    import propsObj from "./props";
    defineOptions({
        name: "xiaoquanButton"
    })
    const props = defineProps(propsObj);
    const _ref = ref(null);
    // console.log(props);
    defineExpose({
        ref: _ref,
        test: 666
    })
</script>

<style scoped lang="scss">

</style>